<template>
	<view>
			<view class="vote">
				<view class="top">
					<image src="@/static/icon/Questionnaire.png" mode=""></image>
					<view class="main_head">
						<view style="font-size: 36upx;font-weight: bold;">{{title}}</view>
						<view>
							<text style="color: #007AFF;margin-right: 8upx;">{{teacher}}老師</text>
							<text style="color: #999999;">發佈於{{time}}</text>
						</view>
					</view>
					<view class="questionnaire">
						問卷
					</view>
				</view>
				<view class="middle">
					<view class="main_content">
						{{content}}
					</view>
					<view class="time">
						<text style="font-size: 28upx;font-weight: 600;">截止時間：</text>
						<text style="color: #999999;">{{deadline}}</text>
					</view>
				</view>
				<view :class="{bottom:true, disableBottom:compareTime(deadline)}">去參與</view>
			</view>
		</view>
</template>

<script>
	export default {
		name:"questionnaire",
		props:{
			title:{
				type:String,
				default:'問卷調查名稱'
			},
			teacher:{
				type:String,
				default:'xx'
			},
			time:{
				type:String,
				default:'2021-03-11 23:59'
			},
			content:{
				type:String,
				default:'txttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxttxt'
			},
			deadline:{
				type:String,
				default:'2021-03-11 23:59'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			compareTime(date1){
				var oDate1 = new Date(date1);
				var oDate2 = new Date();
				return oDate1.getTime() > oDate2.getTime() ? false : true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vote{
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 30upx;
		box-shadow: 0 10px 30px #dedede;
		.top{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			image{
				width: 100upx;
				height: 100upx;
				vertical-align: middle;
				margin: 20upx;
			}
			.questionnaire{
				position: absolute;
				top: 0;
				right: 0;
				padding: 10upx 30upx;
				font-size: 24upx;
				color: #FFFFFF;
				background-color: #5c8ff6;
				border-top-right-radius: 20upx;
				border-bottom-left-radius: 20upx;
			}
		}
		.middle{
			padding: 10upx 30upx;
			.main_content{
				min-height: 110rpx;
				white-space: normal;
				word-break: break-all;
				margin-bottom: 10upx;
				font-size: 32upx;
			}
			.time{
				padding: 10upx 0;
			}
		}
		.bottom{
			border-top: 1px solid #e5e5e5;
			padding: 20upx;
			color: #007AFF;
			text-align: center;
			font-size: 28upx;
		}
		.disableBottom{
			color: $uni-text-color-disable;
		}
	}
</style>
